<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证表单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

        .form-container {
            max-width: 400px;
            margin: 0 auto;
            background-color: #f7f7f7;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input[type="text"],
        .form-group input[type="password"] {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .form-group button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div  class="form-container">
        <form id="myForm" action="/verification_config_message" method="post">
            <div class="form-group">
                <label for="appID">appID</label>
                <input type="text" id="appID" name="appID" required>
            </div>
            <div class="form-group">
                <label for="token">Token</label>
                <input type="password" id="token" name="token" required>
            </div>
            <div class="form-group">
                <label for="EncodingAESKey">EncodingAESKey</label>
                <input type="password" id="EncodingAESKey" name="EncodingAESKey" required>
            </div>

            <div class="form-group">
                <label for="corpID">corpID</label>
                <input type="password" id="corpID" name="corpID" required>
            </div>
            <div class="form-group">
                <label for="CorpSecret">CorpSecret</label>
                <input type="password" id="CorpSecret" name="CorpSecret" required>
            </div>
            <div class="form-group">
                <button type="submit">提交</button>
            </div>
        </form>
    </div>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
    // 阻止表单的默认提交行为
    event.preventDefault();
    const form = document.getElementById('myForm');
    // 获取表单数据
    const formData = new FormData(form);

    // 使用 fetch API 发送 POST 请求
    fetch('/api/verification_config_message', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        // 检查响应是否成功
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json(); // 解析 JSON 响应
    })
    .then(data => {
        // 在这里处理服务器的响应数据
        console.log(data); // 在控制台打印响应数据
        // 你可以根据需要更新页面的某些部分，或者执行其他操作
        confirm('提交成功'+data);
    })
    .catch(error => {
        // 在这里处理任何错误
        console.error('There was a problem with the fetch operation:', error);
    });
});
</script>
</body>
</html>